<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="i.css">
    <style>
        
        .wc-app{ width: 40px; height: 40px; border-radius: 50%; background-color: #eee;  position: absolute; left: 50%; margin-left: -15px; margin-top: -15px; }
    </style>

</head>
<body style="background-color: #f3f4f7;">

    <div class="watch">
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
        <div class="wc-app"></div>
    </div>

    <script src="i.js"></script>
    <script>
        var apps = document.querySelectorAll('.wc-app')
        var watch = document.querySelector('.watch')
        var ww = watch.offsetWidth, wh = watch.offsetHeight
        var center = { x: ww / 2, y : wh / 2 }
        
        $(apps).each(function(el, index) {
            var groupInfo = findGroupInfo(index)
            var height = this.offsetHeight;
            var group = groupInfo.index
            var num = groupInfo.offset
            var radius = group * height + (group * 6) // 加了一个6像素的偏移量
            var degree = group == 0 ? 0 : 360 / (group * 6)

            // 获取旋转过后的坐标，加上表盘的偏移量，将其绘制在中心
            var pos = getRotatePosition(radius, degree * num)
            this.style.left = (pos.x + center.x) + 'px'
            this.style.top = (pos.y + center.y) + 'px'
        })

        // 给app配上随机颜色
        $(apps).each(function() {
            var r = getRandomColor();
            var g = getRandomColor();
            var b = getRandomColor();
            this.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 1)`
        })

        function getRandomColor() {
            var color = Math.random() * 255;
            if (color > 20) {
                return color;
            }
            return getRandomColor();
        }

        // 反向递归查找当前组
        function findGroupInfo (index) {
            if (index <= 0) {
                return { index: 0, offset: 0 }
            }
            var n = 0, m = 0;

            function doFind() {
                if (n >= index) {
                    return { index: m / 6, offset: index - n + m - 1 }
                }
                m += 6;
                n += m;
                return doFind()
            }

            return doFind()
        }

        // 计算点绕线旋转某个角度后的坐标
        function getRotatePosition(r, deg) {
            var radian = 2 * Math.PI / 360;
            return {
                x: r * Math.cos(radian * deg),
                y: r * Math.sin(radian * deg)
            }
        }

    </script>
    
    
</body>
</html>